<template>
  <div>
    <van-popup :show="show" lock-scroll :close-on-click-overlay="false" custom-style="background: none;">
      <div class="box" @touchmove.stop.prevent="touchmove">
        <image :src="homeImgSrc" mode="widthFix" :style="'width:' + homeImgWidth" @click="onDetail" v-if="type === 'home'"></image>
        <image :src="codeImgSrc" mode="widthFix" :style="'width:' + codeImgWidth" v-else @longtap="save"></image>
        <image :src="closeImgSrc" mode="widthFix" class="close-img" :style="'width:' + closeImgWidth" @click="onClose"></image>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: "home"
    }
  },
  data() {
    return {
      homeImgSrc: "https://staticcdn.youliao.com/static/image/www_m/double-eleven/pop%402x.png",
      codeImgSrc: "https://staticcdn.youliao.com/static/image/www_m/double-eleven/code_pop.png",
      closeImgSrc: "https://staticcdn.youliao.com/static/image/www_m/double-eleven/btn_icon_home_back@2x.png",
      homeImgWidth: "100vw",
      codeImgWidth: "79vw",
      closeImgWidth: "8vw"
    };
  },
  created() {
    uni.getSystemInfo({
      success: (res) => {
        console.log("getSystemInfo:", res);
        const { screenWidth, screenHeight } = res;
        this.homeImgWidth = `${(1 - (screenWidth / screenHeight).toFixed(2)) * 185}vw`;
        this.codeImgWidth = `${(1 - (screenWidth / screenHeight).toFixed(2)) * 145}vw`;
        this.closeImgWidth = `${(1 - (screenWidth / screenHeight).toFixed(2)) * 15}vw`;
      }
    });
  },
  methods: {
    onDetail() {
      this.$emit("onDetail");
    },
    onClose() {
      this.$emit("onClose");
    },
    save() {
      uni.showModal({
        title: "提示",
        content: "确定保存到相册吗",
        success: (res) => {
          if (res.confirm) {
            this.downloadFile();
          }
        }
      });
    },
    getSetting() {
      console.log(`getSetting`);
      uni.getSetting({
        success: (res) => {
          console.log(`getSetting.res`, res);
          if (!res.authSetting["scope.writePhotosAlbum"]) {
            uni.showToast({
              title: "请在小程序设置中，打开相册权限",
              icon: "none"
            });
          } else {
            this.downloadFile();
          }
        }
      });
    },
    downloadFile() {
      uni.downloadFile({
        url: this.codeImgSrc, // 图片地址
        success: (res) => {
          console.log(`downloadFile`);
          if (res.statusCode === 200) {
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: () => {
                uni.showToast({
                  title: "保存成功",
                  icon: "none"
                });
              },
              fail: () => {
                console.log(`saveImageToPhotosAlbum.fail`);
                this.getSetting();
              }
            });
          }
        }
      });
    },
    touchmove() {}
  }
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;
  align-items: center;

  img {
    display: flex;
  }
  .close-img {
    margin-top: 40rpx;
  }
}
</style>
